<template>
  <el-dialog
      id="homePreview"
      title="配准预览"
      :visible.sync="visible"
      width="60%"
      top="8vh"
      center>
    <div  style="width: 100%; height: 65vh; position: relative">
      <div :style="{'z-index' : status === 'generating' ? 20 : -10}" style="position: absolute; left: 50%; top: 50%; width: 260px; height: 80px; transform: translate(-50%, -50%)">
        <div class="process-bar--block--step"></div>
        <div style="width: 100%; text-align: center">预览生成中，这需要一点时间...</div>
      </div>
      <epgis-map
          :style="{'z-index' : status === 'success' ? 20 : -10}"
          :map-params="mapParams"
          @map-inited="mapInited"
      ></epgis-map>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">返回</el-button>
    <el-button type="primary" @click="doExport">导出</el-button>
  </span>
  </el-dialog>
</template>

<script>
import EpgisMap from "@/components/EpgisMap.vue";
import {downloadTIF, generateTiles} from "@/api/geo";
import {calculateCenter, convertToLatLon} from "@/util/toUTM";

export default {
  name: 'HomePreview',
  components: {EpgisMap},
  data() {
    return {
      status: 'generating',
      visible: false,
      map: null,
      mapParams: {
        container: "map",
        style: "aegis://styles/aegis/Satellite512",
        zoom: 15,
        bearing: 0,
        trackResize: true,
        doubleClickZoom: false,
        center: [112.63546014576417, 35.03502734505277],
        localIdeographFontFamily: "'PingFang SC', 'Microsoft YoHei'"
      },
      targetId : null,
      targetGeoTransform: null,
      targetWidth: null,
      targetHeight: null,
      callback : null,
      espgCode: null
    }
  },
  mounted() {

  },
  methods: {
    mapInited(map) {
      this.map = map;
      this.callback && this.callback();
      this.callback = null;
    },
    resetTIF() {
      this.targetId = null;
      this.targetGeoTransform = null;
      this.targetWidth = null;
      this.targetHeight = null;
      this.espgCode=null;
    },
    show(params) {
      this.visible = true;
      this.targetId = params['targetId'];
      this.targetGeoTransform = params['targetGeoTransform'];
      this.targetHeight = params['targetHeight'];
      this.targetWidth = params['targetWidth'];
      // this.targetId = '36384c13-2663-4b08-847b-49a4be8cef5b';
      this.espgCode=params['espgCode'];
      this.status = 'generating';
      generateTiles({
            "rawtif_uuid": this.targetId,
            "profile": "mercator",
            "zoom_levels": "6-17",
            "webviewer": "none",
            "espgCode": this.espgCode
      }).then(res => {
        if(res.status_code === '200') {
          this.status = 'success';
          let rasterRender = () => {
            if(!this.map.getSource('wms-test-source')) {
              this.map.addSource('wms-test-source', {
                'type': 'raster',
                'tiles': [
                  `/api/tiles/${res['rawtif_uuid']}/{z}/{x}/{y}.png`,
                ],
                'tileSize': 256
              });

              this.map.addLayer(
                  {
                    'id': 'wms-test-layer',
                    'type': 'raster',
                    'source': 'wms-test-source',
                    'paint': {}
                  },
                  // 'building' // Place layer under labels, roads and buildings.
              );
            }
            try {
              let targetCenter = calculateCenter(this.targetGeoTransform, this.targetWidth,
                  this.targetHeight);
              let targetCenterLonLat = convertToLatLon(targetCenter[0], targetCenter[1],this.espgCode);
              this.changeCenter(targetCenterLonLat);
            } catch (e) {}

          };
          if(this.map) {
            rasterRender();
          }
          else {
            this.callback = rasterRender;
          }
        }
      });
    },
    changeCenter(val) {
      if(this.map && val) {
        this.map.flyTo({
          center: val,
          zoom: 15,
          speed: 1.2,
        });
      }
    },
    doExport() {
      if(!this.targetId) {
        this.$message({
          message: "未获取到对应配准图像！",
          type: 'warning'
        });
        return;
      }
      // window.location.href = `/api/download/${this.targetId}`;
      this.$emit('doExport', this.targetId,this.espgCode);
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
<style>
#homePreview .el-dialog__body {
  padding: 10px 25px;
}
#homePreview .el-dialog__footer{
  padding: 5px 20px 10px 20px;
}

.process-bar--block--step {
  float: left;
  background-image: linear-gradient(-45deg, #00a19c 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #00a19c 50%, #00a19c 75%, rgba(255, 154, 26, 0) 75%);
  background-color: #d3d3d3;
  background-size: 50px 50px;
  animation: movex 3s linear infinite;
  width: 100%;
  height: 18px;
  position: relative;
}

@keyframes movex {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
</style>
